<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" th:href="@{/bootstarp/bootstrap.css}">
    <script th:src="@{/js/jquery-3.4.1.js}"></script>
    <script th:src="@{/bootstarp/bootstrap.js}"></script>
    <script th:src="@{/bootstarp/bootstrap-paginator.js}"></script>
</head>
<body>

<div class="container">
    <h1 class="page-header">回复信息列表</h1>
    <br><br>
    <div style="text-align: right">
        <a th:href="@{'/replyDetail/addUI/'+${id}}" class="btn btn-primary">添加回复</a>
        <a th:href="@{'/invitation/main'}" class="btn btn-success">返回帖子</a>
    </div>
    <br>
    <br>
    <div>
        <table class="table table-bordered table-striped table-hover">
            <thead>
            <tr>
                <th>回复内容</th>
                <th>回复昵称</th>
                <th>发布时间</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="reply:${pageInfo.list}">
                <td th:text="${reply.content}"></td>
                <td th:text="${reply.author}"></td>
                <td th:text="${#dates.format(reply.createdate,'yyyy-MM-dd')}"></td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="row" style="text-align: center">
        <!--分页组件-->
        <ul id="page"></ul>
    </div>
</div>


<script>
    /*jquery的入口函数*/
    $(function () {
        //获取当前页
        var currentPage = [[${pageInfo.pageNum}]];
        //获取总页数
        var totalPages = [[${pageInfo.pages}]];
        $("#page").bootstrapPaginator({
            bootstrapMajorVersion: 3, //对应的bootstrap版本
            currentPage: currentPage, //当前页数
            numberOfPages: 10, //每次显示页数
            totalPages: totalPages, //总页数
            useBootstrapTooltip: false,
            itemTexts: function (type, page, current) {//设置分页按钮显示字体样式
                switch (type) {
                    case "first":
                        return "首页";
                    case "prev":
                        return "上一页";
                    case "next":
                        return "下一页";
                    case "last":
                        return "末页";
                    case "page":
                        return page;
                }
            },
            //点击事件
            onPageClicked: function (event, originalEvent, type, page) {
                console.log(page);
                window.location.href = "/replyDetail/main/[[${id}]]?pageNum=" + page;
            }
        });
    });

    // function toAdd(id) {
    //     window.location.href = "/replyDetail/addUI/" + id;
    // }
</script>
</body>
</html>